<template>
  <div class="root">
    <el-card v-for="item in userReservation" :key="item.id" class="card">
      <div class="doc">
        <svg t="1738857519409" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
          p-id="9925" width="64" height="64">
          <path
            d="M0.349091 508.16c0 280.064 227.048727 507.112727 507.112727 507.112727 280.087273 0 507.136-227.048727 507.136-507.112727C1014.597818 228.072727 787.549091 1.024 507.485091 1.024 227.374545 1.024 0.325818 228.072727 0.325818 508.136727z"
            fill="#324A5E" p-id="9926"></path>
          <path
            d="M1014.714182 508.16L674.862545 168.261818l-264.610909 253.742546-94.161454 71.191272 92.462545 92.462546-21.620363-6.912 117.829818 117.806545 227.467636 266.309818c167.400727-82.967273 282.484364-255.441455 282.484364-454.74909z"
            fill="#2B3B4E" p-id="9927"></path>
          <path
            d="M552.96 633.995636v-55.109818h-99.374545v55.109818c0 4.421818-3.607273 7.912727-7.912728 7.912728h-68.468363v190.254545h252.392727v-190.231273H561.105455a8.005818 8.005818 0 0 1-8.145455-7.912727z"
            fill="#FED8B2" p-id="9928"></path>
          <path
            d="M629.480727 641.931636h-68.468363a7.936 7.936 0 0 1-7.912728-7.912727v-55.133091h-48.919272v253.277091h125.416727l-0.116364-190.231273z"
            fill="#EABE96" p-id="9929"></path>
          <path d="M302.638545 463.453091a39.726545 39.726545 0 1 0 79.429819 0 39.726545 39.726545 0 0 0-79.429819 0z"
            fill="#FED8B2" p-id="9930"></path>
          <path d="M624.616727 463.453091a39.726545 39.726545 0 1 0 79.429818 0 39.726545 39.726545 0 0 0-79.429818 0z"
            fill="#EABE96" p-id="9931"></path>
          <path
            d="M507.810909 628.805818h-8.936727a149.922909 149.922909 0 0 1-149.969455-149.969454v-136.843637a149.922909 149.922909 0 0 1 149.969455-149.946182h8.936727a149.922909 149.922909 0 0 1 149.946182 149.969455v136.843636a150.062545 150.062545 0 0 1-149.946182 149.946182z"
            fill="#F4E3C3" p-id="9932"></path>
          <path
            d="M507.810909 192.046545h-3.630545V628.829091h3.630545a149.922909 149.922909 0 0 0 149.946182-149.969455v-136.843636c-0.093091-82.711273-67.211636-149.946182-149.946182-149.946182z"
            fill="#FED8B2" p-id="9933"></path>
          <path
            d="M641.466182 242.757818a162.327273 162.327273 0 0 0-133.306182-69.376h-9.751273a162.769455 162.769455 0 0 0-162.722909 162.746182v127.208727h23.877818V396.101818c72.541091-7.354182 143.825455-21.597091 206.312728-52.829091a372.363636 372.363636 0 0 0 77.172363 67.560728v52.503272h27.950546v-127.208727a162.909091 162.909091 0 0 0-29.533091-93.370182z"
            fill="#B97850" p-id="9934"></path>
          <path
            d="M641.466182 242.757818a162.327273 162.327273 0 0 0-133.306182-69.376h-4.072727v194.792727a424.657455 424.657455 0 0 0 61.789091-24.901818 372.363636 372.363636 0 0 0 77.172363 67.560728v52.503272h27.950546v-127.208727a162.909091 162.909091 0 0 0-29.533091-93.370182z"
            fill="#935635" p-id="9935"></path>
          <path d="M415.115636 445.789091a15.383273 15.383273 0 1 0 30.789819 0 15.383273 15.383273 0 0 0-30.789819 0z"
            fill="#59595B" p-id="9936"></path>
          <path d="M560.663273 445.789091a15.383273 15.383273 0 1 0 30.789818 0 15.383273 15.383273 0 0 0-30.789818 0z"
            fill="#272525" p-id="9937"></path>
          <path
            d="M503.296 572.322909a50.501818 50.501818 0 0 1-50.501818-50.478545 8.471273 8.471273 0 1 1 16.989091 0 33.373091 33.373091 0 1 0 66.792727 0 8.471273 8.471273 0 1 1 16.965818 0 50.176 50.176 0 0 1-50.269091 50.478545z"
            fill="#FD8469" p-id="9938"></path>
          <path
            d="M553.751273 521.844364a8.471273 8.471273 0 1 0-16.965818 0 33.28 33.28 0 0 1-32.581819 33.28v17.082181a50.385455 50.385455 0 0 0 49.570909-50.362181z"
            fill="#FC6F58" p-id="9939"></path>
          <path
            d="M640.349091 641.931636h-52.968727a84.130909 84.130909 0 0 1-84.084364 84.084364 84.130909 84.130909 0 0 1-84.107636-84.084364h-52.829091a115.293091 115.293091 0 0 0-115.339637 115.316364v188.322909a504.622545 504.622545 0 0 0 256.558546 69.585455c90.088727 0 174.754909-23.505455 248.087273-64.698182v-193.210182a115.432727 115.432727 0 0 0-115.316364-115.316364z"
            fill="#FFFFFF" p-id="9940"></path>
          <path
            d="M640.349091 641.931636h-52.968727c0 46.173091-37.236364 83.618909-83.316364 84.084364V1015.156364c1.163636 0 2.280727 0.116364 3.397818 0.116363 90.088727 0 174.754909-23.552 248.087273-64.744727v-193.303273a115.269818 115.269818 0 0 0-115.2-115.316363z"
            fill="#E6F3FF" p-id="9941"></path>
          <path
            d="M507.461818 827.415273v187.880727c9.634909 0 19.246545-0.349091 28.765091-0.930909l83.968-185.949091-44.357818-27.461818 44.357818-36.119273v-125.184h-56.366545l-56.366546 187.764364z"
            fill="#CFDBE6" p-id="9942"></path>
          <path
            d="M451.234909 639.650909h-56.366545v125.184l44.357818 36.096-44.357818 27.508364 83.968 185.949091c9.518545 0.558545 19.013818 0.907636 28.741818 0.907636v-187.880727l-56.343273-187.764364z"
            fill="#E6F3FF" p-id="9943"></path>
          <path d="M333.288727 168.285091h341.573818v167.400727H333.265455z" fill="#FFFFFF" p-id="9944"></path>
          <path d="M504.087273 168.285091h170.775272v167.400727H504.087273z" fill="#D0D1D3" p-id="9945"></path>
          <path
            d="M554.775273 235.054545H521.076364V201.332364h-33.838546v33.745454h-33.745454v33.815273h33.745454v33.745454h33.838546v-33.745454h33.745454z"
            fill="#FC6F58" p-id="9946"></path>
          <path d="M521.053091 235.054545V201.332364h-16.989091v101.306181h16.989091v-33.745454h33.745454V235.054545z"
            fill="#F1543F" p-id="9947"></path>
          <path d="M630.504727 917.946182a39.261091 39.261091 0 1 0 78.522182 0 39.261091 39.261091 0 0 0-78.522182 0z"
            fill="#4CDBC4" p-id="9948"></path>
          <path
            d="M679.959273 869.515636v-223.976727c0-5.655273-4.654545-10.286545-10.309818-10.286545s-10.286545 4.654545-10.286546 10.286545v223.976727a49.617455 49.617455 0 0 0-39.284364 48.430546c0 27.275636 22.178909 49.570909 49.57091 49.570909 27.275636 0 49.570909-22.178909 49.570909-49.570909a49.617455 49.617455 0 0 0-39.261091-48.407273z m-10.193455 77.405091c-15.965091 0-28.974545-13.009455-28.974545-28.974545 0-15.941818 13.032727-28.974545 28.974545-28.974546 15.965091 0 28.974545 13.032727 28.974546 28.974546 0 15.965091-13.032727 28.974545-28.974546 28.974545z m-303.988363-170.891636v-129.582546c0-5.655273-4.654545-10.286545-10.286546-10.286545-5.678545 0-10.309818 4.631273-10.309818 10.286545v129.582546a58.112 58.112 0 0 0-47.755636 57.157818v108.078546c0 5.655273 4.654545 10.309818 10.286545 10.309818h20.829091c5.655273 0 10.309818-4.654545 10.309818-10.309818s-4.654545-10.286545-10.309818-10.286546h-10.519273v-97.908364c0-20.712727 16.849455-37.562182 37.562182-37.562181 20.712727 0 37.585455 16.849455 37.585455 37.562181v97.908364h-14.708364c-5.655273 0-10.309818 4.631273-10.309818 10.286546s4.654545 10.309818 10.309818 10.309818h24.901818c5.655273 0 10.286545-4.654545 10.286546-10.309818v-108.078546a58.181818 58.181818 0 0 0-47.872-57.157818z"
            fill="#26BEBE" p-id="9949"></path>
        </svg>
        <div class="font">
          <span class="reservation-doc">{{ item.doctorName }}</span>
          <span class="reservation-dep">{{ item.hospitalName + ' ' + item.departmentName }}</span>
        </div>
      </div>
      <div class="detail">
        <p>预约医院：{{ item.hospitalName }}</p>
        <p>预约时间：{{ item.createTime }}</p>
      </div>
      <el-button type="success" style="margin-left: 450px;" v-if="item.status=='待支付'" @click="userPay(item.id)">立即支付</el-button>
      <span class="status" v-else>{{ item.status }}</span>
    </el-card>

    <!-- 支付二维码弹窗 -->
    <el-dialog v-model="visiable_pay" title="订单支付" width=30% draggable>
      <div style="display: flex;justify-content: center;align-items: center;">
        <img :src="qrCodeSrc" alt="支付二维码" v-if="qrCodeSrc" />
        <p v-else>加载二维码中...</p>
      </div>
    </el-dialog>
  </div>
</template>

<script setup>
import { reqGetReservation,requserPay } from '@/api/user';
import { ref, onMounted, onBeforeUnmount } from 'vue'
import { reqPayStatus } from '@/api/pay';
import { useRouter } from 'vue-router';

const $router=useRouter()
// 进度条
import NProgress from "nprogress";

import "nprogress/nprogress.css"

// 取消进度条加载圆圈
NProgress.configure({ showSpinner: false });

// 存储用户的预约记录
let userReservation = ref([])
let visiable_pay=ref(false)//控制支付二维码显示
let count=ref(null)//存储定时器

onMounted(async () => {
  // 获取用户预约记录
  let res = await reqGetReservation()
  // console.log(res)
  if (res.data.code == 1) {
    userReservation.value = res.data.data
  }
})

onBeforeUnmount(() => {
  clearInterval(count.value)
})

let qrCodeSrc = ref('');//存储支付二维码

// 支付未支付的订单
const userPay=async (id)=>{
  window.scrollTo(0, 0);
  NProgress.start()
  let res=await requserPay(id)
  console.log(res)
  NProgress.done()
  if(res.data.code==1){
      // 展示支付二维码
      visiable_pay.value=true
      qrCodeSrc.value = `data:image/png;base64,${res.data.data.codeUrl}`;
      console.log(res.data.data.outTradeNo)
        // 查询支付结果
      count.value=setInterval(async ()=>{
        await PayStatus(res.data.data.outTradeNo)
      },8000)
    }else{
      alert(`${res.data.msg}`)
    }
    
}

// 查询支付结果
const PayStatus=async (id)=>{
  let res=await reqPayStatus(id)
  console.log(res)
  if(res.data.code==1){
    clearInterval(count.value); // 清除定时器
    visiable_pay.value = false; // 关闭弹窗
    $router.replace('/success')
  }
}

</script>

<style lang="scss" scoped>
.root {
  min-width: 1800px;
  min-height: 1080px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding-top: 20px;
  .card {
    min-height: 100px;
    margin-bottom: 10px;
    width: 600px;
    margin-right: 20px;
    .doc {
      display: flex;

      .font {
        display: flex;
        flex-direction: column;
        margin-left: 15px;

        .reservation-doc {
          font-size: 22px;
          margin-top: 3px;
        }

        .reservation-dep {
          margin-top: 10px;
          font-size: 15px;
        }
      }
    }

    .detail {
      margin-top: 12px;
      font-size: 15px;

      p {
        margin-left: 78px;
      }
    }

    .status {
      margin-left: 470px;
      font-size: 16px;
      color: #0984e3;
    }
  }
}
</style>
